<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas2" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas');
	var context = canvas.getContext("2d");
	var g = context.createLinearGradient(0,0,170,0)
	g.addColorStop(0.1,"rgb(255,0,0)");
	g.addColorStop(0.3,"rgb(0,255,0)");
	g.addColorStop(1,"white")
	context.fillStyle = g;
	context.fillRect(20,20,150,100);
	context.fill();
	context.stroke()
</script>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas2');
	var context = canvas.getContext("2d");
	var g1 = context.createRadialGradient(100,110,5,110,110,100)
	// 渐变开始圆的x坐标，y的坐标，开始圆的半径，渐变结束圆x坐标，y坐标，结束圆的半径
	g1.addColorStop(0,"purple");
	g1.addColorStop(1,"pink");
	context.fillStyle = g1;
	context.fillRect(20,20,250,200);
</script>